---
import type Locale from '$types/Locale';

import { annualSubscriptionPrice } from '$data/subscriptionPrices';
import contactDetails from '$data/contactDetails';
import Page from '$layouts/Page.astro';
import localeStaticPaths from '$lib/localeStaticPaths';
import translate from '$i18n/translate';
import tPage from '$i18n/translations/pages/jyne';
import tMembershipType from '$i18n/translations/enums/membershipType';
import { allMembershipTypes } from '$enums/MembershipType';

export async function getStaticPaths() {
  return localeStaticPaths;
}

const locale = Astro.params.locale as Locale;
const t = translate(locale);
---

<Page title={t(tPage, { key: 'title' })}>
  <header>
    <h1 set:html={t(tPage, { key: 'title' })} />
  </header>

  <section>
    <h2 set:html={t(tPage, { key: 'hou-jyne' })} />
    <p set:html={t(tPage, { key: 'hou-jyne-intro' })} />

    <table>
      <caption>{t(tPage, { key: 'subscription-price-table-caption' })}</caption>
      <thead>
        <tr>
          {
            allMembershipTypes.map((membershipType) => (
              <th scope="col">{t(tMembershipType, { key: membershipType })}</th>
            ))
          }
        </tr>
      </thead>

      <tbody>
        <tr>
          {
            allMembershipTypes.map((membershipType) => (
              <td>
                {new Intl.NumberFormat('en-GB', {
                  style: 'currency',
                  currency: 'GBP',
                  minimumFractionDigits: 2,
                  maximumFractionDigits: 2,
                }).format(annualSubscriptionPrice[membershipType])}
              </td>
            ))
          }
        </tr>
      </tbody>
    </table>

    <ul class="payment-methods-list">
      <li>
        <details>
          <summary set:html={t(tPage, { key: 'hou-pey-by-paypal-title' })} />
          <ul>
            <li><a href={`/${locale}/jyne/paypal/individual-uk`}>Individual (UK)</a></li>
            <li><a href={`/${locale}/jyne/paypal/individual-non-uk`}>Individual (non-UK)</a></li>
            <li><a href={`/${locale}/jyne/paypal/institution-uk`}>Institutional (UK)</a></li>
          </ul>
        </details>
      </li>

      <li>
        <details>
          <summary set:html={t(tPage, { key: 'hou-pey-by-bank-transfer-title' })} />
          <p
            set:html={t(tPage, {
              key: 'hou-pey-by-bank-transfer-para',
              emailAddress: contactDetails.membershipSecretary.emailAddress,
            })}
          />
          <p>
            Scots Language Society<br />
            83-47-00<br />
            00153458
          </p>
        </details>
      </li>

      <li>
        <details>
          <summary set:html={t(tPage, { key: 'hou-pey-by-cheque-title' })} />
          <p
            set:html={t(tPage, {
              key: 'hou-pey-by-cheque-para',
              address: contactDetails.membershipSecretary.address,
            })}
          />
        </details>
      </li>
    </ul>
  </section>

  <section>
    <h2 set:html={t(tPage, { key: 'why-jyne' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-1' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-2' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-3' })} />
  </section>
</Page>